<!-- GLOBAL CORE SCRIPTS -->
<?php use_stylesheet('/timeliner-2.0/css/responsive','',array('media'=>'screen')); ?>
<?php use_stylesheet('/timeliner-2.0/css/screen','',array('media'=>'screen')); ?>
<?php use_stylesheet('/timeliner-2.0/inc/colorbox','',array('media'=>'screen')); ?>
<?php use_javascript('/timeliner-2.0/inc/colorbox'); ?>
<?php use_javascript('/timeliner-2.0/js/timeliner'); ?>

<div id="timeline" class="timeline-container">

			<button class="timeline-toggle expanded">- collapse all</button>

			<br class="clear">
			
<?php $dt = 1900;
foreach ($timelinevalues as $key => $value): 
	if ($dt<>$value->getDateTimeObject('eventdate')->format('Y')): 
		if ($dt<>1900):  ?>
			</div><!-- /.timeline-wrapper -->
		<?php endif;
		
		$dt = $value->getDateTimeObject('eventdate')->format('Y'); ?>
			<div class="timeline-wrapper">
				<h2 class="timeline-year"><span><?php echo $value->getDateTimeObject('eventdate')->format('Y'); ?></span></h2>
	<?php endif; ?>
				<dl class="timeline-event">
					<dt id="<?php echo $value->getDateTimeObject('eventdate')->format('Ymd')."_".$key; ?>">
						<a class="closed" style="font-size: 1em;"><?php echo $value->getTitle(); ?></a></dt>
					<dd class="timeline-event-ex" id="<?php echo $value->getDateTimeObject('eventdate')->format('Ymd')."_".$key; ?>EX"
							style="display: block;">
						<h3><?php echo $value->getDateTimeObject('eventdate')->format('Y-m-d'); ?></h3>
							<p><?php echo __('Sponsors'); ?>:
								<?php echo htmlspecialchars_decode($value->getCustomer()); ?>
							</p>
							<p>
							<?php echo htmlspecialchars_decode($value->getDescription()); ?>
							</p>

							<br class="clear">
					</dd><!-- /.timeline-event-ex -->
				</dl><!-- /.timeline-event -->
<?php endforeach;  ?>	
	</div><!-- /.timeline-wrapper -->
			<br class="clear">
		</div>		
		<script>
		jQuery(document).ready(function ($) {
			$.timeliner({
				//timelineContainer: '#timelineContainer',
				//timelineSectionMarker: '.milestone',
				oneOpen: true,
				expandAllText: '+ Show All',
				collapseAllText: '- Hide All'
			});
			// Colorbox Modal
			$(".CBmodal").colorbox({inline:true, initialWidth:100, maxWidth:682, initialHeight:100, transition:"elastic",speed:750});
		})
	</script>